<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--10)、制作一个注册界面:要求需要输入用户名、设置密码、确认密码、姓名、性别(单选按钮)、手机号码、通讯地址、电子邮箱、身份证号码。
				验证用户名不能为空，用户名由英文字母和数字和下划线任意组合，用户名长度应为5~16个字符
				验证密码不能为空，密码由字母、数字、下划线任意组合，密码长度应为6-16个字符
				验证确认密码必须与新密码匹配
				验证姓名必须是2-4个中文字符
				验证手机号码不能为空，手机号码格式必须以（13、14、15、18）打头的。手机号码长度应为11位
				验证用户输入的电子邮箱是否有效（如电子邮箱必须含有@和.字符）
				验证身份证号码不能为空，身份证号码要求必须验证是否
				为18 位,考虑最后一位X或数字-->
				<style>
					*{
						margin: 0px;
						padding: 0px;
						
					}
					.box{
						
						margin: 80px auto;
						width: 900px;						
					}
					tr{
						line-height: 35px;
					}
					th{
					 text-align: left;
					}
					
					
				</style>
	</head>
	<body>
		<div class="box">
			<form id="form1" action="success.html" method="get" >
				<table>
					<tr>
						<h3>新用户注册</h3>
					</tr>					
					<tr>
						<th>用户名：</th>
						<td>
							<input type="text" name="username" id="username" />
						</td>
						<td><div id="username_prompt"></div></td>
					</tr>
					<tr>
						<th>设置密码：</th>
						<td>
							<input type="password" name="password" id="password" />
						</td>
						<td><div id="password_prompt"></div></td>
					</tr>
					<tr>
						<th>确认密码：</th>
						<td>
							<input type="password" name="repwd" id="repwd"  />
						</td>
						<td><div id="repwd_prompt"></div></td>
					</tr>
					<tr>
						<th>姓名：</th>
						<td>
							<input type="text" name="user" id="user" />
						</td>
						<td><div id="user_prompt"></div></td>
					</tr>
					<tr>
						<th>性别：</th>
						<td>
							<input type="radio" name="gender" checked />男
							<input type="radio" name="gender"  />女
						</td>
					</tr>
					<tr>
						<th>手机号：</th>
						<td>
							<input type="text" name="PhoneNumber" id="Phnum" />
						</td>
						<td><div id="Phnum_prompt"></div></td>
					</tr>
					<tr>
						<th>通讯地址：</th>
						<td>
							<input type="text" name="address" id="add" />
						</td>
					</tr>
					<tr>
						<th>电子邮箱：</th>
						<td>
							<input type="text" name="email-box" id="email" />
						</td>
						<td><div id="email_prompt"></div></td>
					</tr>
					<tr>
						<th>身份证号码：</th>
						<td>
							<input type="text" name="identity" id="ID"/>
						</td>
						<td><div id="ID_prompt"></div></td>
					</tr>
					<tr>
						<td><input type="submit" value="注册" /></td>
						<td><input type="reset" value="取消" /></td>
					</tr>					
				</table>
			</form>
		</div>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			function checkUserName(){
				var $username = $("#username");
				//正则表达式
				var usernameReg = /^w{5,16}$/
				if($.trim($username.val())==""){
					$("#username_prompt").html("请输入用户名！");
					return false;
				}else if($username.length>=5&&$username.length<=16){
					$("#username_prompt").html("用户名长度应为5~16个字符！");
					return false;
				}else if (!usernameReg.test($.trim($username.val()))) {
					$('#username_prompt').html("用户名由英文字母和数字和下划线任意组合！")
					return false;
				} 
				return true;
			}
			/*验证密码不能为空，密码由字母、数字、下划线任意组合，密码长度应为6-16个字符*/
			function checkPassword(){
				var $password = $("#password");
				var passwordReg = /^w{6,16}$/;
				if ($.trim($password.val()=="")) {
					$("#password_prompt").html("密码不能为空!");
				} else if(!passwordReg.test($.trim($password.val()))){
					$("#password_prompt").html("密码由字母、数字、下划线任意组合!");
					return false;
				}
				return true;
			}
			/*验证确认密码必须与新密码匹配*/
			function confirmPassword(){
				var $repwd = $("#repwd");
				var $password = $("#password");
				if($repwd.val()==""){
					$("#repwd_prompt").html("确认密码不能为空！")
				}
				if ($repwd.val()!=$password.val()) {
					$("#repwd_prompt").html("两次输入的密码不匹配！");
					return false;
				}
				return true;
			}
			/*验证姓名必须是2-4个中文字符*/
			function checkUser(){
				var $user = $("#user");
				var userReg = /^[\u4e00-\u9fa5]{2,4}$/;
				if(!userReg.test($.trim($user.val()))){
					$("#user_prompt").html("姓名必须是2-4个中文字符！");
					return false;
				}
				return true;
			}
			//验证电子邮箱
			function checkEmail(){
				var $email = $("#email");
				var emailReg = /[\w\.]+@[a-z\d]{2,}\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3}){0,1}/;
				$("#email_prompt").html("");
				if($.trim($email.val()) == ""){
					$("#email_prompt").html("请输入您常用的电子邮箱！");
					return false;
				}
				else if(!emailReg.test($.trim($email.val()))){
					$("#email_prompt").html("您输入的电子邮箱格式错误！");
					return false;
				}
				return  true;
			}
			//验证手机号码
			function checkMobile(){
				var $Phnum = $("#Phnum");
				var mobileReg = /^(13|15|18|14|17)[0-9]{9}$/;
				if($Phnum.val() == ""){
					$("#mobile_prompt").html("请正确输入您的手机号码！");
					return false;
				}
				else if(!mobileReg.test($.trim($Phnum.val()))){
					$("#mobile_prompt").html("您输入手机号码格式错误！");
					return false;
				}
				return  true;
			}
			/*验证身份证号码是否合法*/
			function checkID(){
				var $id = $("#ID");
				var idReg = /^[1-9]\d{16}(X|\d)$/;
				if($.trim($id.val()) == ""){
					$("#ID_prompt").html("请正确输入您的身份证号码！");
					return false;
				}
				else if(!idReg.test($.trim($id.val()))){
					$("#ID_prompt").html("您输入身份证号码格式错误！");
					return false;
				}
				return  true;
			}
	    $("#username").on('blur',checkUserName);
		$("#pwd").on("blur",checkPassword);
		$("#repwd").on("blur",confirmPassword);
		$("#email").on("blur",checkEmail);
		$("#Phnum").on("blur",checkMobile);
		$("#user").on('blur',checkUser);
		$("#ID").on('blur',checkID);
			  //提交表单
    	$("form").submit(function(){
    		
	        if(checkUserName()&checkPassword()&checkEmail()&checkMobile()&confirmPassword()&checkID()&checkUser()){
	        	return true;
	        }
	        else{
	        	return false;
	        }
    	});
		</script>
	</body>
</html>
